<template>
  <!-- 兑换详情 -->
  <div
    class="box"
    v-cloak
  >
    <van-row>
      <van-image :src="list.thumb" />
    </van-row>
    <div style="padding:10px">
      <van-row>
        <strong>{{list.title}}</strong>
      </van-row>
      <van-row style="padding:15px;overflow-wrap:break-word;width:85vw">
        {{list.desc}}
      </van-row>
      <van-row>
        <span v-if="list.is_total==1">库存：<i>{{list.total}}</i></span> <span class="right">福分：<i style="color:red">{{list.price}}</i></span>
      </van-row>
      <van-row style="text-align:right;margin-top:10px">
        <van-stepper v-model="value" />
      </van-row>
    </div>
    <van-dialog
      v-model="show"
      title="确认兑换"
      show-cancel-button
      style="text-align:center"
      @confirm='confirm'
    >
      <span><i style="color:red;list-style:none">{{val}}</i>福分</span>
    </van-dialog>
    <div style="text-align:center">
      <van-button
        type="info"
        round
        :style="{width:'95%',height:'5.5vh',lineHeight:'5.5vh'}"
        @click="showConfirm"
      >立即兑换</van-button>
    </div>
   
  </div>
</template>

<script type="text/javascript">
import { Row, Image, Stepper, Button, Dialog } from "vant";
export default {
  data() {
    return {
      value: 1,
      show: false,
      list: [],
      val: 0,
      price: 0
    };
  },
  components: {
    [Row.name]: Row,
    [Image.name]: Image,
    [Stepper.name]: Stepper,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component
  },
  created() {
    this.getGoodsInfo();
     dd.biz.navigation.setTitle({
        title: "兑换详情" //控制标题文本，空字符串表示显示默认文本
      });
  },
  methods: {
    async confirm() {
       let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
      const num = this.value;
      let id = this.$route.query.id;
      const res = await this.$http.get(
        `yuepoints/Welfare/shopping?corpId=${corpId}&userId=${userId}&num=${num}&id=${id}`
      );
      if (res.data.errcode == "0000") {
        this.$toast("兑换成功");
        this.$router.replace("/exchange");
      } else {
         this.$toast(res.data.errmsg);
      }
    },
    showConfirm() {
      this.show = true;
      const num = this.value;
      this.val = num * this.price;
    },
    async getGoodsInfo() {
      let id = this.$route.query.id;
        let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getGoodsInfo?corpId=${corpId}&id=${id}`
      );
      this.price = res.data.data.price;
      this.list = res.data.data;
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  text-align: left;
  font-size: 15px;
  padding: 10px 10px 60px 10px;
  /deep/ .van-dialog__content {
    margin: 20px;
  }
  /deep/ .van-stepper__minus--disabled,
  /deep/ .van-stepper__plus {
    //  color: red;
    background: #f2f3f5;
  }

  i {
    font-style: normal;
  }
  .right {
    float: right;
  }
}
</style>
